<script setup lang="ts">
import { h, ref } from 'vue'
import IconFolder from '../../assets/svg/folder.svg'
import IconSetting from '../../assets/svg/setting.svg'
import router from '../../router'
import { useI18n } from 'vue-i18n'
import { Lang, MessageSchema } from '../../locales'

const selectedKeys = ref(['/create/project'])
const { t } = useI18n<{ message: MessageSchema }, Lang>()
const openKeys = ref([])
const items = ref([
  {
    key: '/create/project',
    icon: () => h(IconFolder),
    label: t('side.project'),
    title: t('side.project')
  },
  {
    key: '/create/setting',
    icon: () => h(IconSetting),
    label: t('side.setting'),
    title: t('side.setting')
  }
])
const handleSelect = ({ key }) => {
  router.push(key)
}
router.push('/create/project')
</script>

<template>
  <div class="container">
    <div class="left">
      <div class="title">
        <img src="../../assets/img.png" alt="logo" />
        <div class="title-text">
          <p class="title-text-1">Wdhcr Vite</p>
          <p class="title-text-2">2024.1.1</p>
        </div>
      </div>
      <a-menu
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        router
        class="custom-menu"
        mode="inline"
        :items="items"
        @select="handleSelect"
      />
    </div>
    <div class="right">
      <router-view />
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  height: 100vh;
}

.left {
  flex: 2;
  background: #f6f7f9;
  border-right: 1px solid #e1e2e5;
  padding: 0 10px;
}

.title {
  display: flex;
  padding: 20px 0;
  align-items: center;
}

.title-text {
  padding: 0;
}

.title-text-1 {
  font-size: 12px;
  font-weight: 10;
}

.title-text-2 {
  font-size: 10px;
}

.title img {
  width: 40px;
  height: 40px;
}

.right {
  flex: 5;
}

.custom-menu {
  background: transparent !important;
}

.custom-menu :deep(.ant-menu-item) {
  padding-left: 10px !important;
}

.custom-menu :deep(.ant-menu-item-selected) {
  color: black !important;
  background: var(--primary-color) !important;
}

.left :deep(.ant-menu-inline) {
  border-inline-end: none !important;
}
</style>
